<template>
  <el-card style="margin:20px;padding:0 20px 0 20px;">
    <h3>{{type}}教师</h3>
    <el-form :model="teacherForm" ref="teacherRef" :rules="teacherFormRules">
      <el-form-item prop="teacherName" label="教师姓名">
        <el-input placeholder="教师姓名" v-model="teacherForm.teacherName"/>
      </el-form-item>
      <el-form-item label="老师介绍" prop="teacherIntro">
        <el-input
            type="textarea"
            :rows="4"
            placeholder="老师介绍"
            v-model="teacherForm.teacherIntro">
        </el-input>
      </el-form-item>
      <el-form-item label="任职经历" prop="teacherExp">
        <el-input
            type="textarea"
            :rows="4"
            placeholder="任职经历"
            v-model="teacherForm.teacherExp">
        </el-input>
      </el-form-item>
      <el-form-item label="项目经验" prop="teacherProject">
        <el-input
            type="textarea"
            :rows="4"
            placeholder="项目经验"
            v-model="teacherForm.teacherProject">
        </el-input>
      </el-form-item>

      <el-form-item label="技术简介" prop="teacherTechn">
        <el-input
            type="textarea"
            :rows="4"
            placeholder="技术简介"
            v-model="teacherForm.teacherTechn">
        </el-input>
      </el-form-item>

      <!-- 讲师头像：TODO -->
      <el-form-item label="教师头像">
        <!-- 头衔缩略图 -->
        <pan-thumb :image="teacherForm.teacherImg === undefined ? defaultImg : teacherForm.teacherImg"/>
        <!-- 文件上传按钮 -->
        <el-button type="primary" icon="el-icon-upload" @click="imageCropperShow=true">
          上传图片
        </el-button>
        <!--
          v-show：是否显示上传组件
          :key：类似于id，如果一个页面多个图片上传控件，可以做区分
          :url：后台上传的url地址
          @close：关闭上传组件
          @crop-upload-success：上传成功后的回调
          <input type="file" name="file"/>

        -->
        <image-cropper
            v-show="imageCropperShow"
            :width="300"
            :height="300"
            :key="imageCropperKey"
            :url="BASE_API"
            field="file"
            @close="close"
            @crop-upload-success="cropSuccess"/>
      </el-form-item>
      <el-form-item>
        <el-button
            type="primary"
            @click="saveOrEdit"
        >提交
        </el-button
        >
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'

export default {
  created() {
    if (this.$route.params.id) {
      this.getTeacherById(this.$route.params.id)
    }
  },
  name: "Add",
  data() {
    return {
      //添加教师表单
      teacherForm: {},
      //表单验证
      teacherFormRules: {
        teacherIntro: [{required: true, message: '请填写教师姓名', trigger: 'blur'}],
        teacherName: [{required: true, message: '请填写教师介绍', trigger: 'blur'}],
        teacherExp: [{required: true, message: '请填写教师任职经历', trigger: 'blur'}],
        teacherProject: [{required: true, message: '请填写教师项目经验', trigger: 'blur'}],
        teacherTechn: [{required: true, message: '请填写教师技术简介', trigger: 'blur'}],
      },
      //控制图片缩略图是否显示
      imageCropperShow: false,
      //上传组件的唯一标识
      imageCropperKey: 0,
      //服务器的地址与端口号
      BASE_API: 'http://localhost:8001/cykj/fileOss',
      //默认头像
      defaultImg: "https://meng-edu1010.oss-cn-beijing.aliyuncs.com/2-2.png"
    }
  },
  methods: {
    //头像上传成功的回调的方法
    cropSuccess(data) {
      this.$message.success("上传成功")
      this.imageCropperShow = false
      //上传之后接口返回图片地址
      this.teacherForm.teacherImg = data.url
      this.imageCropperKey = this.imageCropperKey + 1
    },
    //关闭文件上传弹窗的方法
    close() {
      this.imageCropperShow = false
      //上传组件初始化
      this.imageCropperKey = this.imageCropperKey + 1
    },
    //添加教师
    saveTeacher() {
      this.$refs.teacherRef.validate(async valid => {
        // 返回校验结果的布尔值
        if (!valid) return this.$message.error('请填写完整的教师信息');
        let result = await this.$http.teacher.reqSaveTeacher(this.teacherForm);
        if (result.code !== 200) return this.$message.error(result.message)
        this.$message.success("添加成功")
        this.$router.push('/teacher/list')
      })
    },
    //编辑教师
    editTeacher() {
      this.$refs.teacherRef.validate(async valid => {
        // 返回校验结果的布尔值
        if (!valid) return this.$message.error('请填写完整的教师信息');
        let result = await this.$http.teacher.reqEditTeacher(this.teacherForm);
        if (result.code !== 200) return this.$message.error(result.message)
        this.$message.success("修改成功")
        this.$router.push('/teacher/list')
      })
    },
    //提交教师资料
    saveOrEdit() {
      if (this.$route.params.id) {
        this.editTeacher()
      } else {
        this.saveTeacher()
      }
    },
    //根据教师id查询教师信息
    async getTeacherById(id) {
      let result = await this.$http.teacher.reqGetTeacherById(id)
      if (result.code !== 200) return this.$message.error('教师信息获取失败')
      this.teacherForm = result.data.teacher
    }
  },
  components: {
    ImageCropper,
    PanThumb
  },
  computed: {
    type() {
      return this.$route.params.id !== undefined ? '编辑':"添加"
    }
  }
}
</script>

<style scoped>

</style>
